<template>
  <d2-container>
    <div class="h-full">
    	<input type="file" @change="onOpen" />
    	<div class="h-full" id="topology-show"></div>
    </div>
  </d2-container>
</template>

<script>
	import { Topology } from '@topology/core'

	export default {
		data() {
			return {}
		},
		methods: {
			onOpen(e) {
				const file = e.target.files[0]
				if (!file) return
				const reader = new FileReader()
				reader.onload = (event) => {
					try {
						const json = JSON.parse(event.target.result)
						window.topology.open(json)
					} catch(e) {
						console.log('读取文件失败，请检查数据格式')
					}
				}
				reader.readAsText(file)
			},
		},
    created() {
			const topologyShow = new Topology('topology-show', {
				// https://developer.le5le.com/tutorial/topology.html#options-%E9%80%89%E9%A1%B9
				// grid: true, // 是否显示网格
				// rule: true, // 是否显示标尺
			})
		},
	}
</script>

<style>
</style>
